<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="F:\project\iti\Templates\main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
  <meta charset="utf-8">
  <!-- InstanceBeginEditable name="doctitle" -->
  <title>Bootstrap 3, from LayoutIt!</title>
  <!-- InstanceEndEditable -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

	<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
	<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
	<!--script src="js/less-1.3.3.min.js"></script-->
	<!--append �#!watch� to the browser URL, then refresh the page. -->
	<link href="css/video-default.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
    <link  href="css/liquidcarousel.css" rel="stylesheet">
    <link id="colorpage" href="css/cc0000.css" rel="stylesheet">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->

  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
  <link rel="shortcut icon"  href="img/favicon.png">
  
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.video-ui.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
   <script type="text/javascript"   src="js/liquidcarousel.js"></script><!-- for technology -->
	<script type="text/javascript"   src="js/jquery.liquidcarousel.pack.js"></script><!-- for technology -->
   

    <script>
    			$(document).ready(
					function(){
						
						 $('#demo1').videoUI({
						  'autoHide':false,
						  'volumeMedia': 1
						}); 
					$('#liquid').liquidcarousel({
							height: 150,		//the height of the list
							duration: 100,		//the duration of the animation
							hidearrows: true	//hide arrows if all of the list items are visible
						});
						
					}
				);
    </script>
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
</head>

<body class="gradiant">
<div class="container">
	<div class="container top-buffer">
			<div class="row clearfix" id="header">
				<div class="col-md-6 column" id="social">
						<ul>
            				<li><a class="facebook"></a></li>
               				<li><a class="google"></a></li>
                			<li><a class="twitter"></a></li>
                			<li><a class="linkedin"></a></li>
            			</ul>
        	
				</div>
				<div class="col-md-6 column">
					<img src="img/logo.png" id="logo" />
					<ul id="color">
						<li><a class="red" onClick="page_style('red');"></a></li>
						<li><a class="blue" onClick="page_style('blue');"></a></li>
						<li><a class="green" onClick="page_style('green');"></a></li>
						<li><a class="yellow" onClick="page_style('yellow');"></a></li>
					</ul>
				</div>
			</div>
			<div class="row clearfix" id="nav">
				<div class="col-md-12 column">
					<ul class="nav nav-pills">
						<li class="active">
							<a href="#">Home</a>
						</li>
						<li>
							<a href="#">Open Source </a>
						</li>
						<li>
							<a href="#">ITI</a>
						</li>
						<li class="dropdown">
        					<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cources <b class="caret"></b></a>
        					<ul class="dropdown-menu">
          						<li><a href="#">PHP</a></li>
         						<li><a href="#">Ruby</a></li>
          						<li><a href="#">Apache</a></li>
          						<li class="divider"></li>
          						<li><a href="#">oprating System</a></li>
          						<li class="divider"></li>
          						<li><a href="#">Network</a></li>
        					</ul>
      					</li>
					</ul>
				</div>
			</div><!-- end nav -->	
	

		<!-- InstanceBeginEditable name="main" -->
	<div class="col-md-12 column">
	<table>
		<tr>
			<td><img src="images/forum_logo.png" class="img-rounded" /></td>
		</tr>
	</table>
	<ul class="breadcrumb">
		<li>You are here : <a href="forum-index.html">Home</a></li>
		<li class='active'><a href="category.html">Category</a></li>
		<li class='active'>topic</li>
	</ul>
	<input type="buttom" class="btn btn-danger" value="Quick Reply" onClick="go()">
	<br><br>
	<div class="well ">
		<div class="postbody span9">
			<h3 class="first"><a href="forum-post.html">Topic name</a></h3>
			<p>posted by <strong><a href="#">Abdulrahman</a></strong> >> Thu Jan 02, 2014 9:28 pm </p>
			<div class="content">
				Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.
				Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
			</div>
		</div>
		<dl class="postprofile span3">
			<dt>
				<img src ='images/user-profile.jpg'><br><br>
				<a href="#">Abdulrahman Hamdy</a> <span class="label  label-danger">offline</span>
			</dt>
			<dd><strong>Posts:</strong> 1</dd>
			<dd><strong>Joined:</strong> Thu Jan 02, 2014</dd>
		</dl>
		<div class="back2top"><a href="#wrap" class="top" title="Top">Top</a></div>
		<div class="postbody span9">
			<h3 class="first"><a href="#">Comment</a></h3>
			<p>posted by <strong><a href="#">Abdulrahman</a></strong> >> Thu Jan 02, 2014 9:28 pm </p>
			<div class="content">
				Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.
				Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
			</div>
		</div>
		<dl class="postprofile span3">
			<dt>
				<img src ='images/user-profile.jpg'><br><br>
				<a href="#">Abdulrahman Hamdy</a> <span class="label  label-danger">offline</span>
			</dt>
			<dd><strong>Posts:</strong> 1</dd>
			<dd><strong>Joined:</strong> Thu Jan 02, 2014</dd>
		</dl>
		<div class="back2top"><a href="#wrap" class="top" title="Top">Top</a></div>
	</div>
	<br><br>
	<table class="table table-bordered table-hover">
		<thead>
			<tr>
				<th>WHO IS ONLINE</th>	
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><p>Users browsing this forum : <a href="#">Abdulrahman</a> , <a href="#">Mona Sa2awya</a> , <a href="#">Mostafa Sayed</a> , <a href="#">Beshoy Smsm</a> and 1 guest</p>
				</td>
			</tr>
		</tbody>
	</table>
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>Forum permissions</th>	
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<p>You cannot post new topics in this forum<br>You cannot reply to topics in this forum<br>You cannot edit your posts in this forum<br>You cannot delete your posts in this forum<br>You cannot post attachments in this forum</p>
				</td>
			</tr>
		</tbody>
	</table>
	<p><center>Copyrights &copy; are reserved OpenSource Department<br>All Times are CLT (GMT +2)</center><p>
</div>	
		
		<!-- InstanceEndEditable -->
            	
		</div>
	</div><!-- end collection -->
   <div id="footet">
				<footer>
					<div id="footer-widgets">
						<div class="width-container footer-4-column">
							<div id="text-2" class="widget ">
								<h5>About us</h5>
								<div class="textwidget">
									<p class="form-control-static">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
								</div>
							</div>
							<div id="blog_subscription-2" class="widget jetpack_subscription_widget">
								<h5 class="widget-title"><label for="subscribe-field">Subscribe via Email</label></h5>
								<form action="" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-2">
									<p id="subscribe-text">Enter your email address to subscribe to our website and receive notifications of news by email.</p>
									<p id="subscribe-email"><input class="form-control" type="text" name="email" style="width: 95%; padding: 1px 2px"  placeholder="subscribe" id="subscribe-field"/></p>
									<p id="subscribe-submit">
										<input type="submit" class="btn btn-primary" id="subscribe" value="Subscribe"  />
									</p>
								</form>		
							</div>
							<div id="nav_menu-2" class="widget widget_nav_menu">
								<h5 class="widget-title">More About Us</h5>
								<div class="menu-main-navigation-container">
									<ul id="menu-main-navigation-1" class="menu">
										<li><a>Home</a></li>
										<li><a>Home</a></li>
										<li><a>Home</a></li>
										<li><a>Home</a></li>
										<li><a>Home</a></li>
										<li><a>Home</a></li>
									</ul>
								</div>
							</div>
							<div class="clearfix"></div>
						</div><!-- close .width-container -->
					</div><!-- close #footer-widgets -->
		
					<div class="width-container">		
						<div id="copyright">&copy; 2014 All Rights Reserved.</div>		
						<div class="clearfix"></div>
					</div><!-- close .width-container -->
				</footer>
			</div>

		</div>
		<script>
			function page_style(color){
				var link = document.createElement('link');
				document.getElementById("colorpage").remove();
				link.rel = "stylesheet";
				link.type = "text/css";
				link.id = "colorpage";

				switch (color)
				{
					case 'red':
							link.href = "css/cc0000.css";				
					break;
					case 'green':
							link.href = "css/4dc081.css";
					break;
					case 'blue' :
							link.href = "css/2e75b6.css";
					break;
					case 'yellow':
						link.href = "css/ffc000.css";
					break;
				}
	
				document.head.appendChild(link);
			}
		</script>
	</body>
</html>
